<template>
	<view >
		<u-popup :show="showPop" @close="closePop" :safeAreaInsetTop="true" mode="right" bgColor="#f0f2f5">
			<view class="pop-box">
				<view class="pop-title">
					<u-icon name="close" size="20px" @click="closePop"></u-icon><text>筛选</text><text></text>
				</view>
				<u-divider></u-divider>
				<view class="fliter-dep-box">
					<text>学院要求</text>
					<view class="fliter-dep-item">
						<view class="tagDep" @click="handShowpicker(1)">{{depName || '学院不限'}}
							<u-icon name="arrow-down" color="#5098ff" size="18px"></u-icon>
						</view>
					</view>
				</view>
				<view class="fliter-dep-box">
					<text>年级要求</text>
					<view class="fliter-dep-item">
						<view class="tagDep" @click="handShowpicker">{{gradeDesc || '年级不限'}}
							<u-icon name="arrow-down" color="#5098ff" size="18px"></u-icon>
						</view>
					</view>
				</view>
				<view class="fliter-num-box">
					<text>人数</text>
					<view class="fliter-num-item">
						<u-tag v-for="(item, index) in numRadios" :key="index" :text="item.label" :plain="!item.checked"
							:name="index" @click="radioClick">
						</u-tag>
					</view>
				</view>

				<view class="opr-aera">
					<text></text>
					<u-button text="清空" @click="reset"></u-button>
					<view style="width: 120rpx;"></view>
					<u-button type="primary" text="确定" @click="fliterSelsect"></u-button>
				</view>
			</view>
		</u-popup>
		<at-dep-picker :showPicker="showFliterDep" @confirm="selectDep" @on-close="showFliterDep= false"></at-dep-picker> 
		<at-grade-picker :showPicker="showFliterGrade" @confirm="selectGrade" @on-close="showFliterGrade=false"></at-grade-picker>
	</view>

</template>

<script>
	import AtGradePicker from '@/components/AtGradePicker'
	import AtDepPicker from '@/components/AtDepPicker'
	export default {
		components:{
			AtGradePicker,
			AtDepPicker
		},
		props: {
			show: Boolean
		},
		watch:{
			show(curr,prev){
				this.showPop = curr
			},
		},
		data() {
			return {
				showPop: false,
				showFliterDep: false,
				showFliterGrade: false,
				fliterCount: 0,
				gradeDesc: '',
				depName: '',
				depColumns: [
					[]
				],
				numRadios: [{
						label: '1-5人',
						checked: false
					},
					{
						label: '6-10人',
						checked: false
					},
					{
						label: '10人以上',
						checked: false
					}
				],
				fliterData: {
					department: '',
					grade: '',
					num: [0, 100],
				},
			}
		},
		methods: {
			closePop(){
				this.showPop = false
				this.$emit('on-close')
			},
			selectDep(depId,depName) {
				this.fliterData.department = depId
				this.depName = depName
				this.showFliterDep = false
			},
			selectGrade(grade,gradeDesc) {
				this.fliterData.grade = grade // 存到一个中转对象
				this.gradeDesc = gradeDesc
				this.showFliterGrade = false
			},
			radioClick(name) {
				this.numRadios.map((item, index) => {
					item.checked = index === name ? true : false
				})
				if (name == 0) {
					this.fliterData.num = [1, 5]
				} else if (name == 1) {
					this.fliterData.num = [6, 10]
				} else {
					this.fliterData.num = [11, 100]
				}
			},
			reset() {
				for (let k in this.fliterData) {
					this.fliterData[k] = ''
				}
				this.gradeDesc = '';
				this.depName = '';
				this.fliterData.num = [0, 100]
				this.numRadios.forEach(i => i.checked = false)
			},
			fliterSelsect() {
				this.fliterCount = 0
				for (let k in this.fliterData) {
					if (this.fliterData[k] != '') {
						this.fliterCount++
					}
				}
				if (this.fliterData.num[0] == 0) {
					this.fliterCount--
				}
				this.$emit('fliterSelsect', this.fliterData,this.fliterCount)
				this.closePop()
			},
			async handShowpicker(type) {
				 if (type == 1) {
					// uni.$loading()
					// let id = uni.getStorageSync('schoolId')
					// const res = await deplist({
					// 	schoolId: id
					// }) // 学院列表赋值
					// this.depColumns[0] = res.data
					// this.depColumns[0].unshift({
					// 	depName: "学院不限",
					// 	depId: ''
					// })
					this.showFliterDep = true
				} else {
					// this.gradeColumns[0] = getGradeInSchool()
					this.showFliterGrade = true
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.pop-box {
		width: 500rpx;
		margin-top: 25%;
		position: relative;

		.pop-title {
			display: flex;
			justify-content: space-between;
			width: 450rpx;
			margin: auto;
		}

		.fliter-dep-box {
			width: 450rpx;
			margin: auto;
			padding-bottom: 40rpx;

			.fliter-dep-item {
				margin-top: 20rpx;
			}
		}

		.fliter-num-box {
			width: 450rpx;
			margin: auto;
			padding-bottom: 40rpx;

			.fliter-num-item {
				display: flex;
				justify-content: space-between;
				width: 450rpx;
				margin-top: 20rpx;
			}
		}
	}

	.tagDep {
		display: flex;
		padding: 0 18rpx;
		justify-content: space-between;
		height: 55rpx;
		line-height: 50rpx;
		border-radius: 5rpx;
		border: 2rpx solid #5098ff;
		color: #5098ff;
		font-size: 14px;
	}

	.opr-aera {
		display: flex;
		width: 450rpx;
		margin: auto;
		justify-content: space-around;
		position: fixed;
		bottom: 20rpx;

		:nth-child(0) {
			margin-left: 10rpx;
		}

		:nth-child(1) {
			width: 120rpx !important;
		}
	}
</style>
